import React from "react";
import { useNavigate } from "react-router-dom";
import "../Zhi/index.css";
const Index: React.FC = () => {
  let userInfo = JSON.parse(localStorage.getItem("useritem")!) || "";
  const navigate = useNavigate();
  const ZHIYU = () => {
    navigate("/dan");
  };

  const danzhi = () => {
    navigate("/dan");
  };

  const shaangzhi = () => {
    navigate("/dan");
  };

  const FUDAN = () => {
    navigate("/dan");
  };

  const zhhifang = () => {
    navigate("/chu");
  };

  const handleContactClick = () => {
    alert("请在手机端联系客服");
  };

  const ai = () => {
    window.location.href = window.location.href =
      "https://tongyi.aliyun.com/qianwen/?spm=5176.28326591.0.0.40f76ee15fNl8T&sessionId=089306dd34284b3ba79d82bf8881eb22&st=null";
  };
  return (
    <div>
      <div className="zhibox">
        <div className="zhiboxtop">
          {userInfo ? (
            <div>
              <div className="zhiboxtopleft">
                <img src={userInfo.info} alt="" className="zhiimage" />
                <div className="user">用户名：{userInfo.user}</div>
              </div>
            </div>
          ) : (
            <div>
              <div className="zhiboxtopleft" onClick={() => navigate("/login")}>
                <img src="../src/assets/47.jpg" alt="" className="zhiimage" />
                还没有登录
              </div>
            </div>
          )}
        </div>
        <div className="zhiboxbottom">
          <div className="zhibottleft">
            <p>
              家人
              <span className="zhisapan">0</span>
            </p>
          </div>
          <div className="zhibottcenter">
            <p>
              医生
              <span className="zhisapan">0</span>
            </p>
          </div>
          <div className="zhibottmright">
            <p>
              优惠劵
              <span className="zhisapan">0</span>
            </p>
          </div>
        </div>
      </div>
      <div>
        <div className="title-flex">
          <h3 className="zhiHe">我的订单</h3>
          <span style={{ fontSize: "13px", color: "#999" }}>
            查看全部&emsp;
          </span>
        </div>
        <div className="midd-box">
          <div onClick={ZHIYU}>
            <img src="../../../public/image/图片44.png" alt="" />
            <p>预约挂号</p>
          </div>
          <div onClick={danzhi}>
            <img src="../../../public/image/图片45.png" alt="" />
            <p>咨询订单</p>
          </div>
          <div onClick={shaangzhi}>
            <img src="../../../public/image/图片46.png" alt="" />
            <p>商城订单</p>
          </div>
          <div onClick={FUDAN}>
            <img src="../../../public/image/图片47.png" alt="" />
            <p>专科服务</p>
          </div>
        </div>
      </div>

      <div className="zhimiddle">
        <div className="zhimideetop">
          <h3 className="zhiHe">常用工具</h3>
        </div>
        <div className="zhimideebottom">
          <div className="little-img">
            <img
              src="../../../public/image/图片48.png"
              alt=""
              onClick={zhhifang}
            />
          </div>
          <div className="little-img">
            <img
              src="../../../public/image/图片49.png"
              alt=""
              onClick={() => navigate("/zi")}
            />
          </div>
          <div className="little-img">
            <img
              src="../../../public/image/图片50.png"
              alt=""
              onClick={() => navigate("/kang")}
            />
          </div>
          <div className="little-img">
            <img
              src="../../../public/image/图片51.png"
              alt=""
              onClick={() => navigate("/cang")}
            />
          </div>
          <div className="little-img">
            <img
              src="../../../public/image/图片52.png"
              alt=""
              onClick={() => navigate("/fen")}
            />
          </div>
          <div className="little-img" onClick={() => navigate("/sleep")}>
            <img src="../../../public/image/图片53.png" alt="" />
          </div>
          <div className="little-img" onClick={() => navigate("/monitor")}>
            <img src="../../../public/image/图片54.png" alt="" />
          </div>
          <div className="little-img" onClick={() => navigate("/one")}>
            <img src="../../../public/image/图片55.png" alt="" />
          </div>
          <div className="little-img" onClick={() => ai()}>
            <img src="../../../public/image/图片56.png" alt="" />
          </div>
          <div className="little-img" onClick={() => navigate("/putaway")}>
            <img src="../../../public/image/图片57.png" alt="" />
          </div>
          <div className="little-img" onClick={handleContactClick}>
            <img src="../../../public/image/图片58.png" alt="" />
          </div>
          <div className="little-img" onClick={() => navigate("/complaint")}>
            <img src="../../../public/image/图片59.png" alt="" />
          </div>
          <div className="little-img" onClick={() => navigate("/wallet")}>
            <img src="../../../public/image/图片60.png" alt="" />
          </div>
          <div className="little-img" onClick={() => navigate("/health")}>
            <img src="../../../public/image/图片61.png" alt="" />
          </div>
          <div className="little-img">
            <img src="../../../public/image/图片62.png" alt="" />
          </div>

          <div className="little-img" onClick={() => navigate("/sao")}>
            <img src="../../../public/image/图片63.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  );
};
export default Index;
